<template>
  <div class="create-container">
    <div class="right-container">
      <!---->
      <el-form :inline="true" status-icon label-position="right" class="demo-form-inline"
               label-width="150px">
        <div>
          <el-form-item label="公司名称：" prop="companyName">
            <el-input v-model="listQuery.companyName" placeholder="公司名称"/>
          </el-form-item>
          <el-form-item label="开始日期：" prop="startDate">
            <el-date-picker
              v-model="listQuery.startDate"
              type="date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期：" prop="endDate">
            <el-date-picker
              v-model="listQuery.endDate"
              type="date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
          </el-form-item>
        </div>
        <!--<div style="flex: 1">
          <el-form-item label="法人姓名：" prop="legalName">
            <el-input v-model="listQuery.legalName" placeholder="法人姓名"/>
          </el-form-item>
          <el-form-item label="统一信用代码：" prop="unicode">
            <el-input v-model="listQuery.unicode" placeholder="统一信用代码"/>
          </el-form-item>
          <el-form-item label="最小金额(元)：" prop="minMoney">
            <el-input v-model="listQuery.minMoney" placeholder="最小金额"/>
          </el-form-item>
          <el-form-item label="最大金额(元)：" prop="maxMoney">
            <el-input v-model="listQuery.maxMoney" placeholder="最大金额"/>
          </el-form-item>
          <el-form-item label="所属用户登录名称：" prop="useName">
            <el-input v-model="listQuery.useName" placeholder="所属用户登录名称"/>
          </el-form-item>
        </div>-->
      </el-form>

      <el-table v-loading="listLoading" :data="list" ref="cargoTable" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#F2F2F2',color:'#666'}">
        <el-table-column align="left" min-width="120" label="签约银行代码" prop="bankCode">
          <template slot-scope="scope">
            {{{ "0000":"富民银行", "0001":"网商银行", "0002":"振兴银行" }[ scope.row.bankCode ]}}
          </template>
        </el-table-column>
        <el-table-column align="left" min-width="120" label="企业信用代码" prop="unicode"/>
        <el-table-column align="left" min-width="140" label="企业名称" prop="companyName"/>
        <el-table-column align="left" min-width="120" label="票据号" prop="billNo"/>
        <el-table-column align="left" min-width="120" label="票据金额（元）" prop="amount"/>
        <el-table-column align="left" min-width="100" label="贴现利率（%）" prop="discountPer"/>
        <el-table-column align="left" min-width="100" label="增加时间" prop="addTime"/>
        <el-table-column align="center" label="操作" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="mini" plain
                       @click="handleEdit(scope.row)">查看详情
            </el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <el-form label-position="right" class="demo-table-expand" label-width="180px" style="display: flex">
              <div style="flex: 1">
                <el-form-item label="票据号：" style="margin: 0">
                  <span>{{ scope.row.billNo }}</span>
                </el-form-item>
                <el-form-item label="票据金额：" style="margin: 0">
                  <span>{{ scope.row.amount }}</span>
                </el-form-item>
                <el-form-item label="企业名称：" style="margin: 0">
                  <span>{{ scope.row.companyName }}</span>
                </el-form-item>
                <el-form-item label="签约银行代码：" style="margin: 0">
                  <span>{{ scope.row.bankCode | bankCodeFilter }}</span>
                </el-form-item>
                <el-form-item label="企业信用代码：" style="margin: 0">
                  <span>{{ scope.row.unicode }}</span>
                </el-form-item>
                <el-form-item label="贴现利率(%)：" style="margin: 0">
                  <span>{{ scope.row.discountPer }}</span>
                </el-form-item>
                <el-form-item label="贴现日期：" style="margin: 0">
                  <span>{{ scope.row.discountDate }}</span>
                </el-form-item>
                <el-form-item label="增加时间：" style="margin: 0">
                  <span>{{ scope.row.addTime }}</span>
                </el-form-item>
              </div>
              <div style="flex: 1">
                <el-form-item label="所属用户名称：" style="margin: 0">
                  <span>{{ scope.row.userName }}</span>
                </el-form-item>
                <el-form-item label="贴现银行费用（元）：" style="margin: 0">
                  <span>{{ scope.row.cost }}</span>
                </el-form-item>
                <el-form-item label="银行返回佣金（元）：" style="margin: 0">
                  <span>{{ scope.row.commission }}</span>
                </el-form-item>
                <el-form-item label="用户自身佣金（元）：" style="margin: 0">
                  <span>{{ scope.row.extend0 }}</span>
                </el-form-item>
                <el-form-item label="一级推广佣金（元）：" style="margin: 0">
                  <span>{{ scope.row.extend1 }}</span>
                </el-form-item>
                <el-form-item label="二级推广佣金（元）：" style="margin: 0">
                  <span>{{ scope.row.extend2 }}</span>
                </el-form-item>
                <el-form-item label="三级推广佣金（元）：" style="margin: 0">
                  <span>{{ scope.row.extend3 }}</span>
                </el-form-item>
              </div>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                  @pagination="queryList" style="margin: 0"/>

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'usersearch',
  components: { Pagination },
  filters: {
    bankCodeFilter(val) {
      return { '0000': '富民银行', '0001': '网商银行', '0002': '振兴银行' }[val]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        startDate: undefined,
        endDate: undefined,
        minMoney: undefined,
        maxMoney: undefined,
        useName: undefined,
        unicode: undefined,
        companyName: undefined,
        legalName: undefined
      },
      listLoading: true,
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    queryList() {
      this.listLoading = true
      doGet('recordsearch.html?op=search', this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.data.totalcount
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleEdit(row) {
      let $table = this.$refs.cargoTable;
      this.list.map(item => {
        if (row.id != item.id) {
          $table.toggleRowExpansion(item, false)
        }
      })
      $table.toggleRowExpansion(row)
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
